<template>
	<van-tabbar v-model="selectedTab" fixed @change="onChange">
		<van-tabbar-item v-for="(item, i) of tabbarItems" :key="i" :icon="item.icon">{{ item.title }}
		</van-tabbar-item>
	</van-tabbar>
</template>
<script>
	export default {
		data() {
			return {
				selectedTab: 0, //选中的TabBar
				tabbarItems: [{
						title: "首页",
						routeName: "home",
						icon: "home-o",
					},
					{
						title: "商品",
						routeName: "product",
						icon: "gift-o",
					},
					{
						title: "购物车",
						routeName: "shopcart",
						icon: "shopping-cart-o",
					},
					{
						title: "我的",
						routeName: "user",
						icon: "user-o",
					},
				],
			};
		},
		methods: {
			onChange(index) {
				this.$router.push({
					name: this.tabbarItems[index].routeName
				});
			},
		},
	};
</script>